<template>
  <el-row class="lookINfo">
    <el-col class="col">
      <el-row>
        <el-col :span="14">
          <el-input v-model="shopName" style="padding-right: 10px" clearable />
        </el-col>
        <el-col :span="4">
          <el-button @click="search">搜索</el-button>
        </el-col>
        <el-col :span="6">
          <el-button>添加关联门店</el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-col class="col">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="shopCommunitySort"
          label="序号"
          label-class-name="header"
        />
        <el-table-column
          prop="shopName"
          label="名称"
          label-class-name="header"
        />
        <el-table-column prop="shopId" label="ID" label-class-name="header" />
        <el-table-column
          prop="address"
          label="排序"
          label-class-name="header"
        />
        <el-table-column
          prop="shopAddress"
          label="地址"
          label-class-name="header"
        />
        <el-table-column
          prop="shopOrderCount"
          label="订单数量"
          label-class-name="header"
        />
        <el-table-column prop="address" label="操作" label-class-name="header">
        </el-table-column>
      </el-table>
    </el-col>
    <el-col class="col cancil"
      ><el-button @click="cancel">取消</el-button></el-col
    >
    <el-col class="col">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :pager-count="8"
        :current-page="currentPage"
        :hide-on-single-page="true"
        @current-change="pChange"
      />
    </el-col>
  </el-row>
</template>

<script setup >
import axios from "axios";
import { ref, defineProps, watchEffect, onUpdated, defineEmits } from "vue";
const emits = defineEmits(["only"]);
const cancel = function () {
  emits("only", false);
};
const props = defineProps(["info"]);
let xqId = ref({});

watchEffect(function () {
  xqId.value = props.info.communityId;
  // console.log(xqId.value);
});

//分页器逻辑########
let currentPage = ref();
let total = ref();
const pChange = async function (pages) {
  currentPage.value = pages;
  console.log("分页变化");
  console.log(currentPage.value);

  //网络请求，刷新数据源
  let res = await axios.get(
    `http://43.143.190.87:8091/panghudaojiaBackend/community/communityList?name=&startTime=&endTime=&pageNum=${currentPage.value}&pageSize=10&communityName=`
  );
  tableData.value = res.data.data.list.map((item) => {
    // item.address =
    //   item.communityProvince + item.communityCity + item.communityDistrict;
    return item;
  });
};
//
//搜索逻辑########
let shopName = ref("");
const search = async function () {
  let res = await axios.get(
    `http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/associatedStoresList?pageNum=1&pageSize=10&shopName=${shopName.value}&communityId=${xqId.value}`
  );
  tableData.value = res.data.data.list.map((item) => item);
};
//
let tableData = ref([]);
onUpdated(async function () {
  let res = await axios.get(
    `http://43.143.190.87:8091/panghudaojiaBackend/associatedStores/associatedStoresList?pageNum=1&pageSize=10&shopName=${shopName.value}&communityId=${xqId.value}`
  );
  //分页逻辑########
  // watchEffect(function () {
  currentPage.value = res.data.data.pageNum;
  total.value = res.data.data.total;
  //搜索逻辑
  shopName.value = "";
  //
  // console.log(res.data.data);
  // console.log(currentPage.value);
  // console.log(total.value);
  // });
  //
  // console.log(res);
  tableData.value = res.data.data.list.map((item) => item);
});
</script>

<style lang="less" scoped>
.col {
  padding: 10px 0;
}
.cancil {
  text-align: right;
}
/deep/ .header {
  background-color: #1890ff !important;
  color: white;
}
</style>